<template>
  <div class="container">
    <div class="top">
      <span class=".span">巡检机器人管理</span>

      <!-- <ul class="list">
        <li v-for="item in 5"
            :key="item">
          <i class="el-icon-s-opportunity"></i>
          <span>有新的机器人初始化，请尽快同步信息！</span>
          <span>2022-11-22 10:45:06</span>
          <i class="el-icon-arrow-right"
             @click="synchronization()"></i>
        </li>
      </ul> -->
    </div>

    <div class="selects">
      <el-row>
        <el-form ref="form" :model="form" label-width="150px">
          <el-col :span="8">
            <el-form-item label="场景名称:">
              <el-select
                v-model="queryParams.scenario_name"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in scenarioBox"
                  :key="item.scenario_no"
                  :label="item.scenario_name"
                  :value="item.scenario_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务名称:">
              <el-select
                v-model="queryParams.job_name"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in jobBox"
                  :key="item.job_no"
                  :label="item.job_name"
                  :value="item.job_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="95px" label="机器人名称:">
              <el-select
                v-model="queryParams.dog_name"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in robotBox"
                  :key="item.dog_sn"
                  :label="item.dog_name"
                  :value="item.dog_name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="场景编号:">
              <el-select
                v-model="queryParams.scenario_no"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in scenarioBox"
                  :key="item.scenario_no"
                  :label="item.scenario_no"
                  :value="item.scenario_no"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务编号:">
              <el-select
                v-model="queryParams.job_no"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in jobBox"
                  :key="item.job_no"
                  :label="item.job_no"
                  :value="item.job_no"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="95px" label="机器人编号:">
              <el-select
                v-model="queryParams.dog_sn"
                class="common-style"
                clearable
              >
                <el-option
                  v-for="item in robotBox"
                  :key="item.dog_sn"
                  :label="item.dog_sn"
                  :value="item.dog_sn"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="handleAddDog" icon="el-icon-plus"
              >新增巡检机器人</el-button
            >
          </el-col>
          <el-col :span="16" class="buttons">
            <el-button @click="reset()">重置</el-button>
            <el-button @click="handleSearch" type="primary">查询</el-button>
          </el-col>
        </el-form>
      </el-row>

      <el-row>
        <el-dialog
          :title="dogId > 0 ? '编辑巡检机器人' : '新建巡检机器人'"
          :visible.sync="dialogVisible"
          append-to-body
          custom-class="custom_dialog"
          width="50%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="130px" :rules="rules">
            <el-col :span="24">
              <el-form-item label="机器人编号：">
                <el-input
                  v-model="form.dog_sn"
                  placeholder="待初始化"
                  :disabled="edit"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机器人名称：" prop="dog_name">
                <el-input
                  v-model="form.dog_name"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="机器人型号：">
                <el-input
                  v-model="form.dog_model"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="心跳检查频次：" prop="heart_rate">
                <el-select v-model="form.heart_rate" placeholder="1分钟/次">
                  <el-option label="1分钟/次" value="1"></el-option>
                  <el-option label="3分钟/次" value="2"></el-option>
                  <el-option label="5分钟/次" value="3"></el-option>
                  <el-option label="10分钟/次" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电量预警值：">
                <el-input
                  v-model="form.elec_alarm"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认电量预警值：20%" label-width="201px">
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="温度预警值：">
                <el-input
                  v-model="form.temp_alarm"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="默认温度预警值：55℃" label-width="201px">
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="信号：">
                <el-input
                  v-model="form.dog_signal"
                  placeholder="待初始化"
                  :disabled="edit"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="电量：">
                <el-input
                  v-model="form.dog_elec"
                  placeholder="待初始化"
                  :disabled="edit"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="温度：">
                <el-input
                  v-model="form.dog_temp"
                  placeholder="待初始化"
                  :disabled="edit"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmitDog">确 定</el-button>
          </span>
        </el-dialog>
      </el-row>
    </div>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="在线机器人" name="first"></el-tab-pane>
      <el-tab-pane label="离线机器人" name="second"></el-tab-pane>
    </el-tabs>
    <el-row>
      <el-col :span="6" v-for="(item, i) in tableData" :key="i">
        <div class="card">
          <div class="bottom-top">
            <div class="bottom-top-left">
              <div class="img"></div>
              <div class="state">
                <span
                  >任务状态：
                  <span v-if="index == 0">
                    <span>{{ item.job_status == 0 ? "——" : "" }}</span>
                    <span>{{ item.job_status == 1 ? "待执行" : "" }}</span>
                    <span class="blue">{{
                      item.job_status == 2 ? "执行中" : ""
                    }}</span>
                    <span class="org">{{
                      item.job_status == 3 ? "暂停" : ""
                    }}</span>
                    <span class="red">{{
                      item.job_status == 4 ? "中止" : ""
                    }}</span>
                    <span class="green">{{
                      item.job_status == 5 ? "已完成" : ""
                    }}</span>
                  </span>
                  <span v-if="index == 1" class="color1">——</span>
                </span>
              </div>
            </div>
            <div class="bottom-top-right">
              <i class="el-icon-tickets" @click="details(item.dog_id)"></i>
              <i class="el-icon-edit-outline" @click="modify(item)"></i>
              <i class="el-icon-delete" @click="del(item.dog_id)"></i>
            </div>
          </div>
          <div class="bottom-center">
            <p>
              机器人名称：
              <span>{{ item.dog_name }}</span>
            </p>
            <p>
              机器人类型：
              <span>{{ item.dog_type }}</span>
            </p>
            <p>
              机器人编号：
              <span>{{ item.dog_sn }}</span>
            </p>
            <p>
              机器人型号：
              <span>{{ item.dog_model }}</span>
            </p>
          </div>
          <div class="bottom-bottom">
            <div class="item">
              <div class="img img1"></div>
              <p class="span">
                状态：
                <span v-if="index == 0" class="color">{{
                  item.dog_status == 1 ? "在线" : ""
                }}</span>
                <span v-if="index == 1" class="color1">{{
                  item.dog_status == 0 ? "离线" : ""
                }}</span>
              </p>
            </div>
            <div class="item" v-if="item.dog_signal">
              <div class="img img2"></div>
              <p class="span">
                信号：
                <span v-if="index == 0" class="color">{{
                  item.dog_signal
                }}</span>
                <span v-if="index == 1" class="color1">——</span>
              </p>
            </div>
            <div class="item" v-if="item.dog_elec">
              <div class="img img3"></div>
              <p class="span">
                电量：
                <span v-if="index == 0" class="redcolor last"
                  >{{ item.dog_elec ? item.dog_elec + '%' : '' }}</span
                >
                <span v-if="index == 1" class="last color1">——</span>
              </p>
            </div>
            <div class="item" v-if="item.dog_temp">
              <div class="img img4"></div>
              <p class="span">
                温度：
                <span v-if="index == 0" class="color last"
                  >{{ item.dog_temp ? item.dog_temp + '℃' : '' }}</span
                >
                <span v-if="index == 1" class="last color1">——</span>
              </p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="alert" v-if="synchronizationVisible === true">
      <p class="synchronization">
        正在初始化<i class="el-icon-close" @click="close"></i>
      </p>
      <el-progress :percentage="60"></el-progress>
      <p>正在请求数据，大约剩余5s</p>
    </div>

    <div class="pafooter">
      <el-pagination
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next, jumper"
        background
        :total="total"
        align="center"
      >
      </el-pagination>
    </div>

    <!-- 检查是否有机器人处理信息 -->
    <div v-if="isEditDogState" class="dog-position">
      <ul>
        <li v-for="(item, index) in diaList" :key="index">
          <i class="el-icon-warning-outline"></i
          >有新的机器人初始化，请尽快编辑信息！{{ item.created_at }}&emsp;
          <span class="icon-right" @click="handleEditDog(item)"
            ><i class="el-icon-right"></i
          ></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { patrolInspectionTaskApi } from "@/services/Robot";

export default {
  data() {
    return {
      mystateA1: null,
      synchronizationVisible: false,
      activeName: "first",
      index: 0,
      labelPosition: "right",
      edit: true,
      dialogVisible: false,
      currentPage: 1,
      form: {
        dog_temp: "",
        dog_elec: "",
        dog_signal: "",
        dog_sn: "",
        dog_name: "",
        dog_model: "",
        heart_rate: "",
        elec_alarm: "",
        temp_alarm: "",
      },
      pageNum: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      rules: {
        dog_name: [
          { required: true, message: "请输入机器人名称", trigger: "blur" },
        ],
        heart_rate: [
          { required: true, message: "请输入心跳检查频次", trigger: "change" },
        ],
      },
      dogId: 0,
      queryParams: {},
      robotBox: [],
      jobBox: [],
      scenarioBox: [],
      isEditDogState: false,
      diaList: [],
    };
  },
  created() {
    // this.mystateA1 = this.$notify({
    //   dangerouslyUseHTMLString: true,
    //   message: `<i class="el-icon-s-opportunity" style='background: red;-webkit-background-clip: text;color: transparent;'></i>
    //       <span>有新的机器人初始化，请尽快同步信息！</span>
    //       <span>2022-11-22 10:45:06</span>
    //       <i class="el-icon-arrow-right"
    //          id="messageTrack" style='margin-left:10px'></i>`,
    //   duration: 0,
    // });
  },
  mounted() {
    document.addEventListener("mouseup", (e) => {
      let _track = document.getElementById("messageTrack");
      if (_track) {
        if (_track.contains(e.target)) {
          this.synchronization();
          this.mystateA1.close();
        }
      }
    });
    this.handleSelect();
    this.patrolInspectionTaskList();
    this.handleIsEditDogList();
  },
  methods: {
    handleEditDog(obj) {
      this.modify(obj);
    },
    // 机器人是否是需要编辑
    handleIsEditDogList() {
      patrolInspectionTaskApi.needEditDogList().then((res) => {
        if (res.code == 0) {
          console.log(res, "res1111");
          if (Array.isArray(res.data.list) && res.data.list.length !== 0) {
            this.diaList = res.data.list;
            this.isEditDogState = true;
          }else {
            this.isEditDogState = false;
          }
        }
      });
    },
    // 提交狗
    handleSubmitDog() {
      console.log(this.form, "this.form");
      this.$refs.form.validate((valid, object) => {
        if (valid) {
          const params = {
            ...this.form,
          };
          patrolInspectionTaskApi
            .robotSave({
              data: {
                ...params,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                console.log(res, "res");
                this.dialogVisible = false;
                this.patrolInspectionTaskList();
                this.handleIsEditDogList();
                this.handleSelect();
                if (this.dogId > 0) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                } else {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                }
              }
            })
            .catch((e) => []);
        }
      });
    },
    // 新建机器人
    handleAddDog() {
      this.dogId = 0;
      this.dialogVisible = true;
      this.form = {};
      this.$refs.form.resetFields();
    },
    close() {
      this.synchronizationVisible = false;
    },
    synchronization() {
      this.synchronizationVisible = true;
    },
    reset() {
      this.queryParams = {};
      this.patrolInspectionTaskList();
    },
    handleClick(tab) {
      this.index = tab.index;
      this.patrolInspectionTaskList();
    },
    patrolInspectionTaskList(dogObj) {
      const params = {
        is_page: 1,
        page_size: this.pageSize,
        page: this.pageNum,
        dog_status: this.index == 0 ? 1 : 0,
        ...dogObj,
      };
      patrolInspectionTaskApi
        .robotList({
          params: {
            ...params,
          },
        })
        .then((res) => {
          console.log(res, "res222222");
          if (res.code == 0) {
            if (Array.isArray(res.data.list)) {
              this.tableData = res.data.list;
              this.pageNum = res.data.page;
              this.pageSize = res.data.page_size;
              this.total = res.data.total_count;
            }
          }
        })
        .catch((e) => {});
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.patrolInspectionTaskList();
    },
    handlePageChange(page) {
      this.pageNum = page;
      this.patrolInspectionTaskList();
    },
    // 查询
    handleSearch() {
      console.log({ ...this.queryParams }, "this.form1111");
      this.patrolInspectionTaskList({ ...this.queryParams });
    },
    del(id) {
      this.$confirm("确认彻底删除此机器人？", "删除巡检机器人", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id, "id");
          const params = {
            dog_id: id,
          };
          patrolInspectionTaskApi
            .robotDelete({
              data: {
                ...params,
              },
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.patrolInspectionTaskList();
              }
            })
            .catch((e) => {});
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    modify(dogObj) {
      console.log(dogObj, "dog_id");
      this.dogId = dogObj.dog_id;
      this.form = dogObj;
      this.dialogVisible = true;
    },
    details(dog_id) {
      this.$router.push({
        path: `/robotDetails?dog_id=${dog_id}`,
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 下拉框
    handleSelect() {
      patrolInspectionTaskApi.commonScenarioBox().then((res) => {
        if (res.code == 0) {
          this.scenarioBox = res.data.list;
        }
      });
      patrolInspectionTaskApi.commonJobBox().then((res) => {
        if (res.code == 0) {
          this.jobBox = res.data.list;
        }
      });
      patrolInspectionTaskApi.commonRobotBox().then((res) => {
        if (res.code == 0) {
          this.robotBox = res.data.list;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-input,
.el-select,
.el-date-editor {
  width: 100%;
}

.top {
  padding: 0 20px;
  height: 54px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  border: 2px solid rgba(230, 230, 230, 0.39);
  .span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
  }
}

.alert {
  width: 390px;
  height: 178px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  box-shadow: 0px 0px 4px rgba(153, 153, 153, 0.349019607843137);
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  border-radius: 4px;
  padding: 12px 8px 0 12px;
  /deep/ .el-progress {
    margin: 34px 0 12px 0;
  }
  .synchronization {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
  }
  p {
    font-family: "MicrosoftYaHei", "Microsoft YaHei", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
}

.selects {
  margin: 15px 0;
  border-bottom: 2px solid rgba(230, 230, 230, 0.39);
  padding-bottom: 20px;
  .buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

/deep/ .el-row,
.el-tabs {
  padding: 0 20px;
}

.card {
  background: rgba(24, 144, 255, 0.04);
  margin-top: 17px;
  margin-right: 15px;
  padding: 16px 22px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  // height: 192px;
  .bottom-top {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    .bottom-top-left {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .img {
        width: 74px;
        height: 58px;
        background-image: url("../../../assets/robot/robot1.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        border-radius: 4px;
      }
      .state {
        margin-left: 16px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #262626;

        .color {
          color: #00b836;
        }
        .color1 {
          color: #7f7f7f;
        }
      }
    }
    .bottom-top-right {
      .el-icon-edit-outline {
        margin: 0 5px;
      }
    }
  }
  .bottom-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #262626;
    margin: 14px 0 6px 0;
    p {
      line-height: 25px;
      width: 50%;
      color: #595959;
      &:nth-child(2n-1) {
        span {
          color: #262626;
        }
      }
    }
  }
  .bottom-bottom {
    display: flex;
    align-items: center;
    .item {
      width: 25%;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      &:not(:nth-child(1)) {
        margin-left: 3px;
      }
      .img {
        margin-right: 3px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .img1 {
        background-image: url("../../../assets/robot/state.png");
        width: 12px;
        height: 12px;
      }
      .img2 {
        background-image: url("../../../assets/robot/signal.png");
        width: 12px;
        height: 11px;
      }
      .img3 {
        background-image: url("../../../assets/robot/power.png");
        width: 12px;
        height: 8px;
      }
      .img4 {
        background-image: url("../../../assets/robot/temperature.png");
        width: 5px;
        height: 12px;
      }
      .span {
        font-size: 11px;
        .color {
          color: #70b603;
        }
        .color1 {
          color: #7f7f7f;
        }
        .redcolor {
          color: #d9001b;
        }
      }
    }
  }
}

.pafooter {
  margin: 5px auto 15px;
}
.container {
  position: relative;
}
.dog-position {
  padding: 15px;
  position: absolute;
  top: 20px;
  right: 20px; //-321
  // width: 400px;
  height: 100px;
  // border: 1px solid #7f7f7f;
  border-radius: 4px;
  overflow-y: auto;
  background-color: #f2f2f2;
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #000;
    padding: 5px 0;
    .icon-right {
      display: inline-block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #000;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
    }
  }
}
// /deep/ .el-icon-warning-outline:before {
//   background-color: #f00;
//   border-radius: 50%;
//   color: #fff;
//   border: none;
// }

.blue {
  color: #409eff;
}
.org {
  color: #f59a23;
}
.red {
  color: red;
}
.green {
  color: #70b603;
}
/deep/ .el-dialog__header {
  background-color: #1890ff;
  color: #fff;
  text-align: center;
}
</style>